import { motion } from "motion/react";
import styled from "styled-components";


export const DraggableNode = styled(motion.div)`
  background-color: #14ae5c;
  color: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 250px;
  min-height: 40px;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
  cursor: move;
  border: solid 1px #ccc;

  &.SqlNode:hover {
    border-color: #2e74ff;
    border-width: 1px;
  }
  &.PreprocessNode:hover {
    border-color: #9671ff;
    border-width: 1px;
  }
  &.TransposeNode:hover, &.UnionNode:hover, &.AggregateNode:hover, &.JoinNode:hover {
    border-color: #ff9f1a;
    border-width: 1px;
  }
  &.SinkNode:hover, &.PersistNode:hover {
    border-color: #45cc67;
    border-width: 1px;
  }
`;
